<template>
	<view class="wrap">
		<form @submit="_submit">
			<view class="top">
				<view class="item">
					<view class="left">会员昵称</view>
					<input type="text" placeholder-class="line" placeholder="请填写会员昵称" name="nickname"
						v-model="nickname" />
				</view>
				<view class="item">
					<view class="left">会员头像</view>
					<!-- 	<u-upload ref="uUpload" name="avatarurl" :fileList="oldAvatarUrl" max-count="1" :action="action"
						upload-text="上传头像" :auto-upload="false" @on-success="uploadsuccess" @on-error="uploaderror"
						@on-choose-complete="chooseimg" :form-data="formData" :header="header"></u-upload> -->
					<u-upload :fileList="oldAvatarUrl" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="1" uploadText="上传头像"></u-upload>
				</view>
				<view class="item">
					<view class="left">会员性别</view>
					<view class="right">
						<u-radio-group v-model="sex" @change="radioGroupChange" active-color="orange">
							<u-radio v-for="(item, index) in sexlist" :key="index" :name="item.value">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="item" @tap="showBirthdayPicker">
					<view class="left">会员生日</view>
					<!-- 				<input disabled type="text" placeholder-class="line" name="birthday" v-model="birthday"
						placeholder="2020-06-19"> -->
					<picker mode="date" @change="birthdayConfirm">{{date}}</picker>

				</view>
				<view class="item" @click="regionVisible=true">
					<view class="left">所在地址</view>
					<input disabled type="text" placeholder-class="line" placeholder="省市区县、乡镇等" name="region"
						v-model="region" />
				</view>
			</view>
			<regionPicker :visible.sync="regionVisible" mode="region" default-type="value" :hide-area="false"
				@confirm="onConfirm($event,'region')" ref="region"></regionPicker>
			<!-- 	<u-datetime-picker :show="birthdayShow" mode="year-month" ref="uPicker" v-model="value1"  @confirm="birthdayConfirm" /> -->
			<!-- 	<view class="">
				<u-datetime-picker :show="birthdayShow" ref="uPicker" v-model="value1" mode="date"
					@confirm="birthdayConfirm"></u-datetime-picker>
			</view> -->

			<button form-type="submit" type="warn">保存并使用</button>
			<button form-type="reset">重置</button>
		</form>
	</view>
</template>

<script>
	// 引入地区模块
	import regionPicker from "@/components/region/w-picker.vue";
	export default {
		components: {
			regionPicker
		},
		data() {
			return {
				date: '2020-01-01',
				id: '', //初始化修改数据id
				// 头像提交服务端地址
				action: this.$baseUrl + `/api/infoedit`,
				// 需要展示的图片列表比如展示需要编辑的用户头像
				oldAvatarUrl: [],
				// 表单数据(不含头像信息)
				formData: {},
				// 初始化header头
				header: {},
				oldImg: '', //初始化旧图片
				regionVisible: false, //初始化地区选择器开关
				nickname: '鲁班', //初始化收件人姓名
				region: '北京市市辖区朝阳区', //初始化地区默认值
				birthday: '1992-02-14',
				birthdayShow: false,
				sexlist: [{
						value: 1,
						name: '男'
					},
					{
						value: 2,
						name: '女'
					},
				],
				sex: 1 //初始化会员性别
			}
		},

		onLoad() {
			this.getUserInfo(1)
		},

		methods: {
			// 修改会员信息	
			async _submit(e) {
				// 获取用户信息
				let {
					id,
					sex,
					birthday,
					nickname,
					region,
					oldAvatarUrl
				} = this
				let user = {
					id: this.id,
					sex: this.sex
				}
				uni.uploadFile({
					url: '/api/infoedit',
					filePath: this.oldAvatarUrl[0].url,
					name: 'avatarurl',
					formData: user,
					header: {
						authorization: this.$store.state.userInfo.token
					},
					success: (res) => {
						setTimeout(() => {
							console.log(res)
						}, 1000)
					}
				})
			},
			// async _submit(e) {
			// 	console.log(e);
			// 	let {
			// 		token
			// 	} = uni.getStorageSync('userInfo')
			// 	let {
			// 		birthday,
			// 		nickname,
			// 		region
			// 	} = e.detail.value
			// 	let {
			// 		id,
			// 		sex
			// 	} = this
			// 	this.header = {
			// 		authorization: token
			// 	}
			// 	this.formData = {
			// 		id,
			// 		sex,
			// 		birthday,
			// 		nickname,
			// 		region
			// 	}
			// 	// 当提交时如果用户修改了头像，走upload提交。如果没修改，走普遍提交
			// 	let file = this.$refs.upload.lists[0].file || null
			// 	if (file == null) { //没修改
			// 		let options = {
			// 			url: '/api/infoedit',
			// 			data: this.formData,
			// 			header: this.header,
			// 			method: 'POST'
			// 		}
			// 		let result = await this.$http(options)
			// 		if (result.data.code == 200) {
			// 			uni.showToast({
			// 				title: '修改成功',
			// 				icon: 'success'
			// 			})
			// 			this.getUserInfo(2)
			// 		} else if (result.data.code == 403) {
			// 			uni.showToast({
			// 				title: '请重新登录',
			// 				icon: 'error'
			// 			})
			// 			setTimeout(() => {
			// 				uni.navigateTo({
			// 					url: '/pages/login/login'
			// 				})
			// 			}, 2000)
			// 		} else {
			// 			uni.showToast({
			// 				title: '网络故障',
			// 				icon: 'error'
			// 			})
			// 		}
			// 	} else { //有图片时修改信息
			// 		setTimeout(() => {
			// 			this.$refs.upload.upload()
			// 		}, 50)
			// 	}
			// },
			// 获取会员信息
			async getUserInfo(type) {
				let {
					token,
					uid
				} = uni.getStorageSync('userInfo')
				let options = {
					url: '/api/getuserinfo',
					data: {
						uid
					},
					header: {
						authorization: token
					}
				}
				let result = await this.$http(options)
				// console.log(result);

				if (result.data.code == 200) {
					// 判断是获取用户信息还是更新用户信息
					if (type == 2) {
						result.data.list[0].token = token
						uni.setStorageSync('usrtInfo', resule.data.list[0]) //更新本地缓存信息
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/mine/mine'
							})
						}, 2000)
					} else if (type == 1) { //获取用户信息
						let userInfo = result.data.list[0]
						this.nickname = result.nickname
						this.birthday = result.birthday
						this.id = userInfo.id
						this.sex = userInfo.sex
						this.region = userInfo.region
						this.oldAvatarUrl = [{
							url: this.$baseUrl + userInfo.avatarurl

						}]
					}

				} else if (result.data.code == 403) {

					uni.showToast({
						title: '请重新登录',
						icon: 'error'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 2000)
				} else {
					uni.showToast({
						title: '网络故障',
						icon: 'error'
					})

				}

			},
			// 选择会员地区
			onConfirm(res) {
				console.log(res);
				this.region = res.result
			},
			// 监听本地选择图片
			chooseimg(lists, name) {},
			// 性别标签切换
			radioGroupChange(e) {},

			// 地址默认设置开关
			setDefault(e) {},

			// 开始生日选择器
			showBirthdayPicker() {
				this.birthdayShow = true;
			},
			// 监听时期选择器
			birthdayConfirm(e) {
				console.log(e);
				this.date = e.target.value
			},

			afterRead(event) {
				// 选择的图片显示在组件上
				this.oldAvatarUrl = [{
					url: event.file[0].url //选择图片的临时路径
				}]
			},
			// 删除图片
			deletePic(res) {
				this.oldAvatarUrl = []
			},
			// 图片上传成功触发
			uploadsuccess(data, index, lists, name) {
				if (data.code == 200) {
					uni.showToast({
						title: '修改成功',
						icon: 'success'
					})
					this.getUserInfo()
				}
			},
			// 图片上传失败触发
			uploaderror(res, index, lists, name) {},

		}
	}
</script>

<style lang="scss" scoped>
	// 引入样式
	@import '@/static/css/userinfo.scss';
</style>